<template>
  <!-- 取消订单 -->
  <xtx-dialog
    :visible.sync="visibleDialog"
    title="取消订单"
    submitText="提交"
    cancelText="再想想"
    width="685px"
    @on-cancel="closeCancel"
    @on-submit="cancelOrder"
  >
    <div class="cancel-info">
      <p>取消订单后，本单享有的优惠可能会一并取消，是否继续？</p>
      <p class="tip">请选择取消订单的原因（必选）：</p>
      <div class="btn">
        <a
          @click="cancelReason = item"
          v-for="item in cancelReasonList"
          :key="item"
          href="javascript:;"
          :class="{ active: cancelReason === item }"
        >
          {{ item }}
        </a>
      </div>
    </div>
  </xtx-dialog>
</template>

<script>
import { cancelReasons as cancelReasonList } from '@/api/constants'
export default {
  name: 'order-cancel',
  props: {
    order: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visibleDialog: false,
      cancelReasonList,
      cancelReason: ''
    }
  },
  methods: {
    openDialog () {
      this.visibleDialog = true
    },
    closeCancel () {
      this.visibleDialog = false
      this.cancelReason = ''
    },
    async cancelOrder () {
      if (!this.cancelReason) return this.$message({ message: '请选择取消原因', type: 'warn' })
      await this.$http.put(`/member/order/${this.order.id}/cancel`, {
        cancelReason: this.cancelReason
      })
      this.$message({ message: '取消订单成功', type: 'success' })
      this.order.orderState = 6
      this.visibleDialog = false
      this.$emit('on-cancel-success')
    }
  }
}
</script>

<style scoped lang='less'>
.cancel-info {
  p {
    font-size: 16px;
    line-height: 35px;
    &.tip {
      color: #999;
    }
  }
  .btn {
    padding-top: 21px;
    display: flex;
    flex-wrap: wrap;
    a {
      width: 256px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      background-color: #ffffff;
      border: 1px solid #e4e4e4;
      margin-right: 20px;
      margin-bottom: 20px;
      color: #666;
      &:nth-child(2n){
        margin-right: 0;
      }
      &:hover,&.active {
        background-color: #e3f9f4;
        border-color: @xtxColor;
      }
    }
  }
}
</style>
